<template>
	<view :style="warpCss" class="goods-carousel-search-wrap">
		<view class="relative pb-[20rpx]">
			<view class="bg-img" :class="{ '!-bottom-[200rpx]': diyComponent.bgGradient == true }">
				<image
					v-if="diyComponent.swiper.control && diyComponent.swiper.list && diyComponent.swiper.list[swiperIndex].imageUrl"
					:src="img(diyComponent.swiper.list[swiperIndex].imageUrl)" mode="scaleToFill"
					class="w-full h-full bg-img-image" :show-menu-by-longpress="true" />
				<view v-else class="w-full h-full bg-[#fff]"></view>
				<view class="bg-img-box" :style="bgImgBoxStyle"></view>
			</view>
			<view class="fixed-wrap" :style="fixedStyle">
				<view v-if="diyComponent.search.style == 'style-1'" class="diy-search-wrap relative z-10"
					@click="diyStore.toRedirect(diyComponent.search.link)" :style="navbarInnerStyle">
					<view class="img-wrap" v-if="diyComponent.search.logo">
						<image :src="img(diyComponent.search.logo)" mode="aspectFit" />
					</view>
					<view class="search-content" :style="{ backgroundColor: diyComponent.search.bgColor }"
						@click.stop="diyStore.toRedirect(diyComponent.search.link)">
						<text class="input-content text-[#fff] text-[24rpx] leading-[68rpx]"
							:style="{ color: diyComponent.search.color }">{{ isShowSearchPlaceholder ? diyComponent.search.text :
								'' }}</text>
						<text
							class="nc-iconfont nc-icon-sousuo-duanV6xx1 w-[80rpx] h-[52rpx] flex items-center justify-center rounded-[50rpx] text-[28rpx] text-[#fff]"
							:style="{ backgroundColor: diyComponent.search.btnBgColor, color: diyComponent.search.btnColor }"></text>
						<swiper class="swiper-wrap" :interval="diyComponent.search.hotWord.interval * 1000" autoplay="true"
							vertical="true" circular="true" v-if="!isShowSearchPlaceholder">
							<swiper-item class="swiper-item" v-for="(item) in diyComponent.search.hotWord.list" :key="item.id">
								<view class="leading-[64rpx] text-[24rpx]" :style="{ color: diyComponent.search.color }">{{ item.text }}
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view v-if="diyComponent.search.style == 'style-2'" class="diy-search-wrap style-2 relative z-10"
					@click="diyStore.toRedirect(diyComponent.search.link)">
					<view class="flex items-center" :style="navbarInnerStyle">
						<view class="img-wrap" v-if="diyComponent.search.logo">
							<image :src="img(diyComponent.search.logo)" mode="aspectFit" class="img-wrap-image" />
						</view>
						<view :style="searchSubTitleCss"
							class="text-[24rpx] h-[38rpx] flex items-center px-[12rpx] rounded-r-[20rpx] rounded-t-[20rpx] rounded-bl-[2rpx]">
							{{ diyComponent.search.subTitle.text }}</view>
					</view>
					<view class="flex items-center w-full mt-[16rpx]">
						<view @click.stop="locationVal.reposition()" v-if="systemStore.diyAddressInfo"
							:style="{ color: diyComponent.search.positionColor }" class="mr-[30rpx]">
							<view class="flex items-baseline font-500">
								<text class="text-[24rpx] mr-[2rpx]">{{ systemStore.diyAddressInfo.city }}</text>
								<text class="iconfont iconxiaV6xx !text-[24rpx]"></text>
							</view>
							<!-- 		<view class="text-[18rpx] mt-[10rpx] truncate max-w-[160rpx]" v-if="systemStore.diyAddressInfo.community">
								{{ systemStore.diyAddressInfo.community }}</view> -->
							<view class="text-[18rpx] mt-[10rpx] truncate max-w-[160rpx]" v-if="systemStore.diyAddressInfo.district">
								{{ systemStore.diyAddressInfo.district }}</view>
						</view>
						<view @click.stop="locationVal.reposition()" class="text-[24rpx] mr-[30rpx] truncate max-w-[160rpx]"
							:style="{ color: diyComponent.search.positionColor }" v-else>{{ systemStore.defaultPositionAddress }}
						</view>

						<view class="search-content" :style="{ backgroundColor: diyComponent.search.bgColor }"
							@click.stop="diyStore.toRedirect(diyComponent.search.link)">
							<text class="input-content text-[#fff] text-[24rpx] leading-[68rpx]"
								:style="{ color: diyComponent.search.color }">{{ isShowSearchPlaceholder ? diyComponent.search.text :
									'' }}</text>
							<text
								class="nc-iconfont nc-icon-sousuo-duanV6xx1 w-[80rpx] h-[52rpx] flex items-center justify-center rounded-[50rpx] text-[28rpx] text-[#fff]"
								:style="{ backgroundColor: diyComponent.search.btnBgColor, color: diyComponent.search.btnColor }"></text>
							<swiper class="swiper-wrap" :interval="diyComponent.search.hotWord.interval * 1000" autoplay="true"
								vertical="true" circular="true" v-if="!isShowSearchPlaceholder">
								<swiper-item class="swiper-item" v-for="(item) in diyComponent.search.hotWord.list" :key="item.id">
									<view class="leading-[64rpx] text-[24rpx]" :style="{ color: diyComponent.search.color }">{{ item.text
									}}</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>

				<view class="tab-list-wrap relative z-10" v-if="diyComponent.tab.control">
					<scroll-view scroll-x="true" class="scroll-wrap" :scroll-into-view="'a' + currTabIndex">
						<view @click="changeData({ source: 'home' }, -1)" class="scroll-item"
							:class="[{ active: currTabIndex == -1 }]">
							<view class="name" :style="{ 'color': getTabColor(currTabIndex == -1) }">首页</view>
							<!-- <view class="line" :style="{'background-color': getTabColor(currTabIndex == -1)}" v-if="currTabIndex == -1"></view> -->
						</view>
						<view v-for="(item, index) in diyComponent.tab.list" class="scroll-item"
							:class="[{ active: index == currTabIndex }]" @click="changeData(item, index)" :id="'a' + index"
							:key="index">
							<view class="name" :style="{ 'color': getTabColor(index == currTabIndex) }">{{ item.text }}</view>
							<!-- <view class="line" :style="{'background-color': getTabColor(index == currTabIndex)}" v-if="index == currTabIndex"></view> -->
						</view>
					</scroll-view>
					<view v-if="diyComponent.tab.list.length" class="absolute tab-btn iconfont icona-yingyongliebiaoV6xx-32"
						@click="tabAllPopup = true"></view>
				</view>

				<view class="bg-img" v-if="fixedStyleBg">
					<image
						v-if="diyComponent.swiper.control && diyComponent.swiper.list && diyComponent.swiper.list[swiperIndex].imageUrl"
						:src="img(diyComponent.swiper.list[swiperIndex].imageUrl)" mode="widthFix"
						class="w-full h-full bg-img-image" :show-menu-by-longpress="true" />
					<view v-else class="w-full h-full bg-[#fff]"></view>
				</view>
			</view>

			<!-- 解决fixed定位后导航栏塌陷的问题 -->
			<template v-if="diyStore.mode != 'decorate'">
				<view v-if="diyComponent.positionWay == 'fixed' && props.scrollBool != undefined && props.scrollBool != -1"
					class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: moduleHeight }"></view>
			</template>

			<!-- 轮播图 -->
			<view class="relative"
				:class="{ 'mx-[20rpx]': swiperStyleBool && diyComponent.swiper.swiperStyle != 'style-3', 'swiper-style-3': diyComponent.swiper.swiperStyle == 'style-3' }"
				:style="carouselSwiperStyle()">
				<swiper v-if="diyComponent.swiper.control" class="swiper" :style="{ height: imgHeight }" autoplay="true"
					circular="true" @change="swiperChange" :class="{
						'swiper-left': diyComponent.swiper.indicatorAlign == 'left',
						'swiper-right': diyComponent.swiper.indicatorAlign == 'right',
						'ns-indicator-dots': diyComponent.swiper.indicatorStyle == 'style-2',
						'ns-indicator-dots-three': diyComponent.swiper.indicatorStyle == 'style-3'
					}" :previous-margin="swiperStyleBool ? 0 : '26rpx'" :next-margin="swiperStyleBool ? 0 : '26rpx'"
					:interval="diyComponent.swiper.interval * 1000" :indicator-dots="isShowDots"
					:indicator-color="diyComponent.swiper.indicatorColor"
					:indicator-active-color="diyComponent.swiper.indicatorActiveColor">
					<swiper-item class="swiper-item" v-for="(item, index) in diyComponent.swiper.list" :key="item.id"
						:style="swiperWarpCss">
						<view @click="diyStore.toRedirect(item.link)">
							<view class="item" :style="{ height: imgHeight }">
								<image v-if="item.imageUrl" :src="img(item.imageUrl)" mode="scaleToFill" :style="swiperWarpCss"
									:class="['w-full h-full', { 'swiper-animation': (swiperIndex != index && diyComponent.swiper.indicatorStyle != 'style-3') }]"
									:show-menu-by-longpress="true" />
								<image v-else :src="img('static/resource/images/diy/figure.png')" :style="swiperWarpCss"
									mode="scaleToFill"
									:class="['w-full h-full', { 'swiper-animation': (swiperIndex != index && diyComponent.swiper.indicatorStyle != 'style-3') }]"
									:show-menu-by-longpress="true" />
							</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="diyComponent.swiper.list.length > 1" :class="[
					'swiper-dot-box',
					{ 'straightLine': diyComponent.swiper.indicatorStyle == 'style-2' },
					{ 'straightLineStyle2': diyComponent.swiper.indicatorStyle == 'style-3' },
					{ 'swiper-left': diyComponent.swiper.indicatorAlign == 'left' },
					{ 'swiper-right': diyComponent.swiper.indicatorAlign == 'right' }
				]">
					<view v-for="(numItem, numIndex) in diyComponent.swiper.list" :key="numIndex"
						:class="['swiper-dot', { active: numIndex == swiperIndex }]"
						:style="[numIndex == swiperIndex ? { backgroundColor: diyComponent.swiper.indicatorActiveColor } : { backgroundColor: diyComponent.swiper.indicatorColor }]">
					</view>
				</view>
				<!-- #endif -->
			</view>

			<!-- 分类展开 -->
			<u-popup :safeAreaInsetTop="true" :show="tabAllPopup" mode="top" @close="tabAllPopup = false">
				<view class="text-sm px-[30rpx] pt-3" :style="{ 'padding-top': (menuButtonInfo.top + 'px') }">全部分类</view>
				<view class="flex flex-wrap pl-[30rpx] pt-[30rpx]">
					<view @click="changeData({ source: 'home' }, -1)"
						:class="['px-[26rpx] border-[2rpx] border-solid border-transparent h-[60rpx] mr-[30rpx] mb-[30rpx] flex items-center justify-center bg-[#F4F4F4] rounded-[8rpx] text-xs', { 'tab-select-popup': currTabIndex == -1 }]">
						首页
					</view>
					<text @click="changeData(item, index)" v-for="(item, index) in diyComponent.tab.list" :key="index"
						:class="['px-[26rpx] border-[2rpx] border-solid border-transparent h-[60rpx] mr-[30rpx] mb-[30rpx] flex items-center justify-center bg-[#F4F4F4] rounded-[8rpx] text-xs', { 'tab-select-popup': index == currTabIndex }]">
						{{ item.text }}
					</text>
				</view>
			</u-popup>
		</view>

		<!-- 展示微页面数据 -->
		<template v-if="currentSource == 'diy_page'">

			<view class="child-diy-template-wrap bg-index">

				<diy-group :data="diyPageData"></diy-group>

			</view>
		</template>
	</view>
</template>

<script setup lang="ts">
// 轮播搜索
import { ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import diyGroup from '@/addon/components/diy/group/index.vue';
import { getDiyInfo } from '@/app/api/diy';
import { useLocation } from '@/hooks/useLocation'
import useSystemStore from '@/stores/system';
const systemStore = useSystemStore();
const systemInfo = uni.getDeviceInfo();

const instance = getCurrentInstance();
const props = defineProps(['component', 'index', 'pullDownRefreshCount', 'global', 'scrollBool']);
const diyStore = useDiyStore();
const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})

/************** 定位-start ****************/
let isOpenLocation = false;
if (diyComponent.value && diyComponent.value.search.style == 'style-2' && diyStore.mode != 'decorate') {
	isOpenLocation = true;
}

const locationVal = useLocation(isOpenLocation);
locationVal.onLoad();
locationVal.init();
/************** 定位-end ****************/

const warpCss = computed(() => {
	var style = '';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}
	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	return style;
})


watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)

const moduleHeight: any = ref('')
const setModuleLocation = () => {
	nextTick(() => {
		setTimeout(() => {
			if (diyComponent.value.swiper.swiperStyle != 'style-3') {
				const query = uni.createSelectorQuery().in(instance);
				query.select('.fixed-wrap').boundingClientRect((data: any) => {
					moduleHeight.value = (data.height || 0) + 'px';
				}).exec();
			} else {
				moduleHeight.value = '';
			}
		})
	})
}

const fixedStyleBg = ref(false);
const fixedStyle = computed(() => {
	var style = '';
	if (diyComponent.value.swiper.swiperStyle == 'style-3') {
		style += 'position: absolute;z-index: 99;left: 0;right: 0;';
	}

	// #ifdef H5
	if (props.global.topStatusBar.isShow && props.global.topStatusBar.style == 'style-4') {
		style += 'top:' + diyStore.topTabarHeight + 'px;';
	}
	if (diyComponent.value.swiper.swiperStyle == 'style-3') {
		// h5,上移的像素，采取的是平均值
		if (systemInfo.platform === 'ios') {
			style += 'top: 55px;';
		} else {
			style += 'top: 44.5px;';
		}
	}
	// #endif

	if (diyStore.mode == 'decorate') return style;

	if (diyComponent.value.positionWay == 'fixed') {
		if (props.scrollBool != undefined && props.scrollBool != -1) {
			style += 'position: fixed;z-index: 99;top: 0;left: 0;right: 0;';
		}

		// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
		menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		if (props.global.topStatusBar.isShow) {
			style += 'top:' + diyStore.topTabarHeight + 'px;';
		}
		// #endif

		if (props.scrollBool == 1 || props.scrollBool == 2) {
			// #ifdef H5
			if (props.global.topStatusBar.isShow && props.global.topStatusBar.style == 'style-4') {
				style += 'top:' + diyStore.topTabarHeight + 'px;';
			}
			// #endif
		}


		fixedStyleBg.value = false;
		if (props.scrollBool == 1) {
			let str = diyComponent.value.fixedBgColor || "";
			let arr = str.split(',');
			let num = diyComponent.value.fixedBgColor ? parseInt(arr[arr.length - 1]) : 0;
			if (!diyComponent.value.fixedBgColor || num == 0) {
				fixedStyleBg.value = true;
			} else {
				fixedStyleBg.value = false;
				style += 'background-color:' + diyComponent.value.fixedBgColor + ';';
			}
		}
	}
	return style;
})

// 轮播样式
const carouselSwiperStyle = () => {
	let style = "";
	if (diyComponent.value.swiper.swiperStyle == 'style-3') {
		// #ifdef H5
		// h5,上移的像素，采取的是平均值
		if (systemInfo.platform === 'ios') {
			style = 'margin-top: -55px;';
		} else {
			style = 'margin-top: -44.5px;';
		}
		// #endif
	}
	return style;
}

const getTabColor = (flag: any) => {
	let color = '';
	if (flag) {
		color = diyComponent.value.tab.selectColor;
		if (diyComponent.value.positionWay == 'fixed' && props.scrollBool == 1) {
			color = diyComponent.value.tab.fixedSelectColor;
		}
	} else {
		color = diyComponent.value.tab.noColor;
		if (diyComponent.value.positionWay == 'fixed' && props.scrollBool == 1) {
			color = diyComponent.value.tab.fixedNoColor;
		}
	}

	return color;
}

const isShowSearchPlaceholder = computed(() => {
	let flag = true;
	for (let i = 0; i < diyComponent.value.search.hotWord.list.length; i++) {
		let item = diyComponent.value.search.hotWord.list[i];
		if (item.text) {
			flag = false;
			break;
		}
	}
	return flag;
})

// 背景渐变
const bgImgBoxStyle = computed(() => {
	var style = '';
	let str = props.global.pageStartBgColor ? props.global.pageStartBgColor : 'rgba(255,255,255,1)';
	if (str.indexOf('(') > -1) {
		let arr = str.split('(')[1].split(')')[0].split(',');
		if (diyComponent.value.bgGradient == true) {
			style += `background: linear-gradient(rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, 0) 65%, rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, 0.6) 70%, rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, 0.85) 80%, rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, 0.95) 90%,  rgb(${arr[0]}, ${arr[1]}, ${arr[2]}, 1) 100%);`;
		}
	} else {
		style += `background: (${str});`;
	}
	return style;
});

// 轮播样式二
const swiperStyleBool = computed(() => {
	var style = diyComponent.value.swiper.swiperStyle == 'style-2' || diyComponent.value.swiper.swiperStyle == 'style-3' ? true : false;
	return style;
})

const imgHeight = computed(() => {
	return (diyComponent.value.swiper.imageHeight * 2) + 'rpx';
})

const swiperIndex = ref(0);

const swiperChange = e => {
	swiperIndex.value = e.detail.current;
};

const swiperWarpCss = computed(() => {
	var style = '';
	if (diyComponent.value.swiper.topRounded) style += 'border-top-left-radius:' + diyComponent.value.swiper.topRounded * 2 + 'rpx;';
	if (diyComponent.value.swiper.topRounded) style += 'border-top-right-radius:' + diyComponent.value.swiper.topRounded * 2 + 'rpx;';
	if (diyComponent.value.swiper.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.swiper.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.swiper.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.swiper.bottomRounded * 2 + 'rpx;';
	return style;
})

const searchSubTitleCss = computed(() => {
	var style = '';
	if (diyComponent.value.search.subTitle.textColor) style += 'color:' + diyComponent.value.search.subTitle.textColor + ';';
	if (diyComponent.value.search.subTitle.startColor && diyComponent.value.search.subTitle.endColor) style += `background:linear-gradient(${diyComponent.value.search.subTitle.startColor}, ${diyComponent.value.search.subTitle.endColor});`;
	else style += 'background-color:' + (diyComponent.value.search.subTitle.startColor || diyComponent.value.search.subTitle.endColor) + ';';
	return style;
})

const currTabIndex = ref(-1)

const currentSource = ref('')

const changeData = (item: any, index: any) => {
	if (diyStore.mode == 'decorate') return false;
	currentSource.value = item.source;
	currTabIndex.value = index;
	if (item.source == 'home') {

		// 首页
		diyStore.topFixedStatus = 'home'

	} else if (item.source == 'diy_page') {

		// 查询微页面数据
		diyStore.topFixedStatus = 'diy'
		getDiyInfoFn(item.diy_id);

	}
}

const tabAllPopup = ref(false);
let menuButtonInfo: any = {};
const navbarInnerStyle = ref('')
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 导航栏内部盒子的样式
// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
// 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
navbarInnerStyle.value += 'padding-top:' + menuButtonInfo.top + 'px;';
// #endif
onMounted(() => {
	refresh();
	// 装修模式下刷新
	if (diyStore.mode == 'decorate') {
		watch(
			() => diyComponent.value,
			(newValue, oldValue) => {
				if (newValue && newValue.componentName == 'CarouselSearch') {
					refresh();
				}
			}
		)
	}
	// 判断让轮播指示器是否出现
	// #ifdef H5
	isShowDots = computed(() => {
		return diyComponent.value?.swiper?.list?.length > 1;
	});
	// #endif

	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	if (diyComponent.value.positionWay == 'fixed') {
		if (props.global.topStatusBar.isShow == false) {
			navbarInnerStyle.value = ''
			let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
			navbarInnerStyle.value += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
			navbarInnerStyle.value += 'padding-top:' + menuButtonInfo.top + 'px;';
		} else if (props.global.topStatusBar) {
			navbarInnerStyle.value = ''
		}

	}
	// #endif
});

const refresh = () => {
	setModuleLocation();
	// 刷新定位
	locationVal.refresh();

	changeData({ source: 'home' }, -1)
	diyComponent.value.swiper.list.forEach((item: any) => {
		if (item.imageUrl == '') {
			item.imgWidth = 690;
			item.imgHeight = 330;
		}
	});
}

const diyPageData = reactive({
	pageMode: 'diy',
	title: '',
	global: {},
	value: []
});

const getDiyInfoFn = (id: any) => {
	if (!id) {
		diyPageData.pageMode = 'diy';
		diyPageData.title = '';
		diyPageData.global = {};
		diyPageData.value = [];
		return;
	}

	getDiyInfo({
		id
	}).then((res: any) => {
		if (res.data.value) {
			let data = res.data;
			diyPageData.pageMode = data.mode;
			diyPageData.title = data.title;

			let sources = JSON.parse(data.value);
			diyPageData.global = sources.global;
			diyPageData.global.topStatusBar.isShow = false; // 子页面不需要展示顶部导航栏
			diyPageData.global.bottomTabBarSwitch = false; // 子页面不需要展示底部导航
			diyPageData.value = sources.value;

			diyPageData.value.forEach((item: any, index) => {
				item.pageStyle = '';
				if (item.pageStartBgColor) {
					if (item.pageStartBgColor && item.pageEndBgColor) item.pageStyle += `background:linear-gradient(${item.pageGradientAngle},${item.pageStartBgColor},${item.pageEndBgColor});`;
					else item.pageStyle += 'background-color:' + item.pageStartBgColor + ';';
				}

				if (item.margin) {
					if (item.margin.top > 0) {
						item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
					}
					item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
					item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
					item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
				}
			});
			uni.setNavigationBarTitle({
				title: diyPageData.title
			})
		}
	});
}

// 轮播指示器
let isShowDots = ref(true)
// #ifdef H5
isShowDots.value = true;
// #endif

// #ifdef MP-WEIXIN
isShowDots.value = false;
// #endif

/******************************* 存储滚动值-start ***********************/
// 键名和组件名一致即可
let componentsScrollVal = uni.getStorageSync('componentsScrollValGroup')
if (componentsScrollVal && (typeof componentsScrollVal == "object")) {
	componentsScrollVal.CarouselSearch = 20
	uni.setStorageSync('componentsScrollValGroup', componentsScrollVal);
} else {
	let obj = {
		CarouselSearch: 20
	}
	uni.setStorageSync('componentsScrollValGroup', obj);
}
/******************************* 存储滚动值-end ***********************/
</script>

<style lang="scss" scoped>
.goods-carousel-search-wrap {
	.bg-img {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		z-index: 0;
		-webkit-filter: blur(0);
		filter: blur(0);
		overflow: hidden;

		.bg-img-uni-image,
		.bg-img-image {
			-webkit-filter: blur(15px);
			filter: blur(15px);
			-webkit-transform: scale(2) translateY(15%);
			transform: scale(2) translateY(15%);
		}

		&.no-filter {

			.bg-img-uni-image,
			.bg-img-image {
				-webkit-filter: blur(0);
				filter: blur(0);
			}
		}

		.bg-img-box {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}
}

.fixed-wrap {
	&.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
		transition: background .3s;
	}
}

.diy-search-wrap {
	display: flex;
	position: relative;
	align-items: center;
	padding: 16rpx;

	.img-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 60rpx;
		margin-right: 20rpx;

		.img-wrap-image {
			width: 100%;
			height: 100%;
		}
	}

	.search-content {
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 6rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, .2);
		flex: 1;
		position: relative;

		.input-content,
		.uni-input {
			box-sizing: border-box;
			display: block;
			height: 60rpx;
			line-height: 64rpx;
			width: 100%;
			padding-right: 20rpx;
			color: #fff;
			background: none;
			flex: 1;
		}

		.iconfont {
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}

		.swiper-wrap {
			position: absolute;
			width: 80%;
			height: 64rpx;
			line-height: 64rpx;
			color: #fff;
		}
	}

	&.style-2 {
		flex-direction: column;
		align-items: baseline;

		.img-wrap {
			margin-right: 10rpx;
		}
	}
}

.tab-list-wrap {
	.scroll-wrap {
		left: 0;
		right: 0;
		z-index: 5;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 24rpx 80rpx 26rpx 20rpx;
		line-height: 1;
	}

	.scroll-item {
		display: inline-block;
		text-align: center;
		vertical-align: top;
		width: auto;
		position: relative;
		padding: 0 20rpx;

		.name {
			font-size: 28rpx;
			color: #333;
			line-height: 32rpx;
		}

		&.active {
			position: relative;

			.name {
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}

	.tab-btn {
		font-size: 34rpx;
		/* #ifdef H5 */
		top: 22rpx;
		right: 20rpx;
		line-height: 1;
		color: #fff;

		&::after {
			content: "";
			position: absolute;
			top: 2rpx;
			bottom: -4rpx;
			left: -14rpx;
			width: 2rpx;
			background: linear-gradient(180deg, #FFFFFF 16%, rgba(255, 255, 255, 0) 86%);
		}

		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 24rpx;
		right: 20rpx;
		color: #fff;

		&::after {
			content: "";
			position: absolute;
			top: 2rpx;
			bottom: 0;
			left: -16rpx;
			width: 4rpx;
			background: linear-gradient(180deg, #FFFFFF 16%, rgba(255, 255, 255, 0) 92%);
		}

		/* #endif */
	}
}

.tab-select-popup {
	color: var(--primary-color);
	border-color: var(--primary-color);
	background-color: var(--primary-color-light);
}

.swiper-animation {
	transform: scale(0.96, 0.96);
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

// 轮播指示器
.swiper-right :deep(.uni-swiper-dots-horizontal) {
	right: 80rpx;
	display: flex;
	justify-content: flex-end;
	transform: translate(0);
}

.swiper-left :deep(.uni-swiper-dots-horizontal) {
	left: 80rpx;
	transform: translate(0);
}

// 指示器样式一
.swiper :deep(.uni-swiper-dot) {
	width: 12rpx;
	height: 12rpx;
}

// 指示器样式二
.swiper.ns-indicator-dots :deep(.uni-swiper-dot) {
	width: 18rpx;
	height: 6rpx;
	border-radius: 4rpx;
}

.swiper.ns-indicator-dots :deep(.uni-swiper-dot-active) {
	width: 36rpx;
}

// 指示器样式三
.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot) {
	width: 8rpx;
	height: 8rpx !important;
	border-radius: 6rpx;
	margin-right: 14rpx;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot):last-of-type {
	margin-right: 0;
}

.swiper.ns-indicator-dots-three :deep(.uni-swiper-dot-active) {
	width: 30rpx;
}

.swiper-dot-box {
	position: absolute;
	bottom: 20rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80rpx 8rpx;
	box-sizing: border-box;

	&.swiper-left {
		justify-content: flex-start;
	}

	&.swiper-right {
		justify-content: flex-end;
	}

	.swiper-dot {
		background-color: #b2b2b2;
		width: 12rpx;
		border-radius: 50%;
		height: 12rpx;
		margin: 8rpx;
	}

	&.straightLine {
		.swiper-dot {
			width: 18rpx;
			height: 6rpx;
			border-radius: 6rpx;

			&.active {
				width: 36rpx;
			}
		}
	}

	&.straightLineStyle2 {
		.swiper-dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 6rpx;
			margin: 0;
			margin-right: 14rpx;

			&.last-of-type {
				margin-right: 0;
			}

			&.active {
				width: 30rpx;
			}
		}
	}
}

.swiper-style-3 {
	:deep(.uni-swiper-dots-horizontal) {
		bottom: 46rpx !important;
	}

	.swiper-dot-box {
		bottom: 38rpx !important;
	}
}
</style>
